<template>
<view>
<!-- loan/loan.wxml -->
<!--<import src="/template/computerTemplate"></import>-->
<view class="index">
  <view class="city list">
    <text class="title">城市</text>
    <text class="city-name value">深圳</text>
  </view>
  <view class="type list">
    <text class="title">查询类型</text>
    <view class="right">
      <picker mode="selector" :range="selectType" @change="selectTypeChange" :value="selectIndex">
        <text class="value">{{selectType[selectIndex]}}</text>
      </picker>
      <image src="/static/images/sys/right.png" class="list-arrow"></image>
    </view>
  </view>
</view>
<!-- 下行template对应的wxml不存在，无法替换，代码已注释 -->
<!-- <template :is="templateName" :data="...template"></template>-->

</view>
</template>

<script>
// loan/loan.js
let totalLoansAvailable = 900000; // 贷款总额最大值
// 贷款总额最大值
let proportion = 1.1; // 贷款总额比例
// 贷款总额比例
const utils = require("../../../../utils/util.js");
let toggleCollection = true;

export default {
  data() {
    return {
      loanType: ["等额本息", "等额本金"],
      // 贷款类型
      selectType: ["贷款", "缴费", "供房"],
      // 查询类型
      selectIndex: "0",
      templateName: "loan",
      // 模板数据
      template: {
        self: "0.00",
        // 公积金个人缴纳
        comp: "0.00",
        // 公积金单位缴纳
        result: "0.00",
        // 最上方显示金额
        booleanType: ["是", "否"],
        unextractedIndex: 0,
        jointApplicantIndex: 1,
        complateType: ["等额本金", "等额本息"],
        complateIndex: "0",
        showNum: false,
        showYear: false,
        scroll: false
      },
      scroll: false
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    // utils.colleation(this, "公积金计算器");
    toggleCollection = true;
    if (options.selectIndex) this.selectIndex = options.selectIndex;
    this.setData({
      selectIndex: this.selectIndex
    });
    if (this.selectIndex === "0") this.templateName = "loan";else if (this.selectIndex === "1") this.templateName = "pay";else if (this.selectIndex === "2") this.templateName = "donorRoom";
    this.setData({
      templateName: this.templateName
    });
  },
  onShareAppMessage: function () {
    return {
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  methods: {
    // 查询类型
    selectTypeChange(e) {
      let index = e.detail.value;
      let templateName;

      switch (index) {
        case "0":
          templateName = "loan";
          break;

        case "1":
          templateName = "pay";
          break;

        case "2":
          templateName = "donorRoom";
          break;

        default:
          templateName = "loan";
      }

      let result = "template.result";
      this.setData({//[result]: "0.00"

        selectIndex: index,
        templateName,
      });
      //try fix
      this[result] = "0.00";
    },

    // 三年内未提取
    unextractedYears(e) {
      let index = e.detail.value;
      let booleanIndex = "template.unextractedIndex";
      if (index === "0") proportion = 1.1;else if (index === "1") proportion = 1;
      this.setData({//[booleanIndex]: index
      });
      //try fix
      this[booleanIndex] = index;
    },

    // 共同申请人
    jointApplicant(e) {
      let index = e.detail.value;
      let jointApplicantIndex = "template.jointApplicantIndex";
      if (index === "1") totalLoansAvailable = 500000;else if (index === "0") totalLoansAvailable = 900000;
      this.setData({//[jointApplicantIndex]: index
      });
      //try fix
      this[jointApplicantIndex] = index;
    },

    // 计算方式
    complateType(e) {
      let index = e.detail.value;
      let complateIndex = "template.complateIndex";
      this.setData({//[complateIndex]: index
      });
      //try fix
      this[complateIndex] = index;
    },

    // 贷款计算
    calculationLoan(e) {
      let balance = parseInt(e.detail.value.balance);
      let spouseBalance = parseInt(e.detail.value.spouseBalance ? e.detail.value.spouseBalance : 0);

      if (balance) {
        let result = (balance * 14 + spouseBalance * 14) * proportion;
        this.template.result = (result <= totalLoansAvailable ? result : totalLoansAvailable).toFixed(2);
        this.setData({
          template: this.template
        });
      } else uni.showToast({
        title: '请输入公积金余额',
        icon: 'none'
      });
    },

    // 贷款重置
    resetLoan(e) {
      this.template.result = "0.00";
      this.setData({
        template: this.template
      });
    },

    // 计算缴费
    calculationPay(e) {
      let base = parseInt(e.detail.value.base);
      let proportion = parseInt(e.detail.value.proportion);

      if (base && proportion) {
        if (base < 2200 || base > 27927) {
          uni.showToast({
            title: '缴存基数范围为：2200-27927',
            icon: 'none'
          });
          return;
        } else if (proportion < 5 || proportion > 12) {
          uni.showToast({
            title: '缴存比例范围为：5%-12%',
            icon: 'none'
          });
          return;
        } else {
          this.template.result = (base * proportion * 2 / 100).toFixed(2);
          this.template.self = (base * proportion * 2 / 100 * 0.5).toFixed(2);
          this.template.comp = this.template.self;
          this.setData({
            template: this.template
          });
        }
      } else {
        if (!base) {
          uni.showToast({
            title: '请输入缴存基数',
            icon: 'none'
          });
          return;
        } else if (!proportion) {
          uni.showToast({
            title: '请输入缴存比例',
            icon: 'none'
          });
          return;
        }
      }
    },

    // 缴费重置
    resetPay(e) {
      this.template.result = "0.00";
      this.template.self = "0.00";
      this.template.comp = "0.00";
      this.setData({
        template: this.template
      });
    },

    // 计算供房
    complateDonorRoom(e) {
      let year = parseInt(e.detail.value.year);
      let loanTotal = parseFloat(e.detail.value.loanTotal);

      if (year && loanTotal) {
        if (year < 0 || year > 30) {
          uni.showToast({
            title: '贷款年限的上限为30年，请修改。',
            icon: 'none'
          });
          return;
        } else if (loanTotal < 0 || loanTotal > 90) {
          uni.showToast({
            title: '贷款金额的上限为90万元，请修改。',
            icon: 'none'
          });
          return;
        } else {
          uni.navigateTo({
            url: `../result/result?year=${year}&loanTotal=${loanTotal}&type=${this.template.complateIndex}`
          });
        }
      } else if (!year) {
        uni.showToast({
          title: '请输入贷款年限',
          icon: 'none'
        });
        return;
      } else if (!loanTotal) {
        uni.showToast({
          title: '请输入贷款金额',
          icon: 'none'
        });
        return;
      }
    },

    showtapsYear() {
      let showYear = "template.showYear";
      this.setData({//[showYear]: true
      });
      //try fix
      this[showYear] = true;
      setTimeout(() => {
        this.setData({//[showYear]: false
        });
        //try fix
        this[showYear] = false;
      }, 1700);
    },

    showtapsNum() {
      let shwoNum = "template.showNum";
      this.setData({//[shwoNum]: true
      });
      //try fix
      this[shwoNum] = true;
      setTimeout(() => {
        this.setData({//[shwoNum]: false
        });
        //try fix
        this[shwoNum] = false;
      }, 1700);
    },

    onPageScroll() {
      if (toggleCollection) {
        this.setData({
          scroll: true
        });
        toggleCollection = false;
      }
    },

    closeCollection() {
      toggleCollection = false;
    },

    openCollection() {
      toggleCollection = true;
    }

  }
};
</script>
<style>
/* loan/loan.wxss */
@import "../../../../template/computerTemplate.css";
input {
  text-align: right;
}
picker {
  width: 100%;
  text-align: right;
}
button {
  width: 221rpx;
  margin: 0;
  border-radius: 4rpx;
  color: #ffffff;
  font-size: 26rpx;
}
.reset {
  margin-right: 18rpx;
  background-color: #FFA366;
}
.submit {
  background-color: #FF6600;
}
page {
  background-color: #F9F9F9;
  box-sizing: border-box;
}

.body {
  padding: 0 40rpx;
  background-color: #ffffff;
}

.index {
  padding: 0 40rpx;
  background-color: #ffffff;
}

.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  /* background-color: #ffffff; */
  border-bottom: 2rpx solid #F7F7F7;
}

.list-arrow {
  width: 14rpx;
  height: 25rpx;
  margin-left: 16rpx;
  margin-top: 6rpx;
}

.city-name {
  margin-right: 30rpx;
}

.right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.title {
  position: relative;
  font-size: 30rpx;
  color: #232323;
  font-weight: 500;
}

.value {
  font-size: 28rpx;
  color: #7E7E7E;
}

.input-placeholder {
  font-size: 28rpx;
  color: #D4D4D4;
  text-align: right;
}

.border {
  padding: 0 40rpx;
  margin-top: 12rpx;
  background-color: #ffffff;
}
.control-group {
  display: flex;
  justify-content: center;
  margin-top: 48rpx;
}
.loan-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.rseult-border {
  width: 462rpx;
  height: 254rpx;
  margin-top: 80rpx;
  padding-top: 52rpx;
  border-radius: 8rpx;
  background-color: #ffffff;
  font-size: 32rpx;
  color: #232323;
  text-align: center;
}
.number {
  font-size: 72rpx;
  font-weight: bold;
}
.desc {
  margin-top: 28rpx;
  color: #B4B4B4;
  font-size: 24rpx;
}
</style>